<template>
  <div class="new_book">
    <header-go-back 
      title="编辑账本" 
      backType="delete" 
      text="√" 
      @back="handleGoBack" 
      @ok="handleFinish"
    ></header-go-back>
    <div class="new_book_content">
      <div class="new_list_item">
        <div class="list_title">账本名称</div>
        <input 
          type="text" 
          class="item_input" 
          :class="{ 'invalid_input': valid.name }" 
          placeholder="输入账本名称" 
          v-model="formData.name"
        >
        <div class="input_invalid"></div>
      </div>
      <div class="new_list_item">
        <div class="list_title">账本图标</div>
        <div class="list_icon" :class="{ 'invalid_input': valid.icon }">
          <div class="icon_kong">
            <span v-if="!formData.icon">空</span>
            <i :class="['iconfont', formData.icon]"></i>
          </div>
        </div>
      </div>
      <div class="new_icon_body">
        <icon-display @clickIcon="handleClickIcon" ></icon-display>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { createBook } from '@/api/book'
import HeaderGoBack from '@/components/common/HeaderGoBack.vue'
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default defineComponent({
  components: {
    HeaderGoBack
  },
  setup() {
    const router = useRouter()
    const store = useStore()
    const formData  = ref({
      name: '',
      icon: ''
    })
    const valid = ref({
      name: false,
      icon: false
    })
    const handleGoBack = () => {
      router.push('/bookManage')
    }
    const handleFinish = () => {
      createBook(formData.value).then((res) => {
        if(typeof res.code === 'number' && res.code === 100) {
          alert('新建成功')
          store.dispatch('fetchBookList')
          handleGoBack()
        }
      })
    }
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const handleClickIcon = (data: any) => {
      formData.value.icon = data
    }
    return {
      formData,
      valid,
      handleGoBack,
      handleFinish,
      handleClickIcon
    }
  }
})
</script>

<style scoped>
    .new_big_class {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    height: 100vh;
    z-index: 10;
  }
  .new_list_item {
    text-align: start;
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
  }
  .list_title {
    display: inline-block;
  }
  .item_input {
    border: none;
    padding-left: 30px;
  }
  .list_icon {
    float: right;
  }
  .icon_kong {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: #F9C3C2;
    text-align: center;
    line-height: 40px;
    font-size: 24px;
    color: #fff;
  }
  .invalid_input {
    border-bottom: 2px solid #F9C3C2;
  }
  .new_icon_body {
    padding: 0 20px;
    height: calc(100% - 120px);
    overflow-y: auto;
    background-color: rgba(249,195,194, 0.2);
  }
  .new_book_content {
    height: calc(100vh -  62px)
  }
</style>